<script setup>
	import FirstTitle from "@comp/FirstTitle";
	import {
		Editor,
		Toolbar
	} from "@wangeditor/editor-for-vue";
	import {
		onMounted
	} from "vue";

	import {
		searchDataQbxx
	} from "@/api/search";
	import {
		addOrUpdateQbxx
	} from "@/api/addOrUpdate";



	const city = window.globalObj.name;
	const editorRef = shallowRef();
	const editorRef1 = shallowRef();

	const toolbarConfig = {};
	const toolbarConfig1 = {};

	const editorConfig = {
		placeholder: "请输入内容..."
	};
	const mode = ref("default");
	const mode1 = ref("default");

	// 加载html
	const initHtml = () => {
		searchDataQbxx({
			m: "有关规定和要求"
		}).then((res) => {
			const {
				data
			} = res
			valueHtml.value = data.find((x) => x.k === "文件使用规定和要求")?.v || "";
			valueHtml1.value = data.find((x) => x.k === "资料使用规定和要求")?.v || "";
		})
	};

	const handleCreated = (editor) => {
		editorRef.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated1 = (editor) => {
		editorRef1.value = editor; // 记录 editor 实例，重要！
	};


	const valueHtml = ref(
		"对文件的建立、审核、批准、发布、发放、回收、归档以及更改、保管和外来文件实施管理，确保所有工作使用有效版本的文件。"
	);

	const valueHtml1 = ref(
		"对资料的建立、审核、批准、发布、发放、回收、归档以及更改、保管和外来资料实施管理，确保所有工作使用有效版本的资料。"
	);


	const saveProgramme = () => {
		ElMessageBox.confirm(`确定要保存吗?`, "警告", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			customClass: "message-box",
		}).then(() => {
			addOrUpdateQbxx({
					m: "有关规定和要求",
					data: [{
							k: "文件使用规定和要求",
							v: valueHtml.value,
						},
						{
							k: "资料使用规定和要求",
							v: valueHtml1.value,
						}
					],
				})
				.then((result) => {
					if (result.code === 200) {
						ElMessage.success("操作成功");
						initHtml();
					} else {
						ElMessage.error(result.msg);
					}
				})
				.catch(() => {});
		});
	}

	onMounted(() => {
		initHtml();

	});
	onBeforeUnmount(() => {
		const editor = editorRef.value;
		const editor1 = editorRef1.value;
		if (!editor) return;
		if (!editor1) return;
		editor.destroy();
		editor1.destroy();
	});



	const tableData = ref([{
			c1: '电动、电声、音响警报器',
			c2: '响36秒，停24秒，连续3分钟',
			c3: '响6秒，停6秒，连续3分钟',
			c4: '一长音3分钟',
			c5: '响15秒，停10秒。响5秒，停10秒。连续2分钟'
		},
		{
			c1: '通拨电话',
			c2: '空袭警报',
			c3: '空袭警报',
			c4: '解除警报',
			c5: '灾情警报'
		},
		{
			c1: '手摇警报器',
			c2: '一长一短',
			c3: '连续短音',
			c4: '一长音3分钟',
			c5: ''
		},
		{
			c1: '广播电台',
			c2: '空袭预报音响，语音同时播出',
			c3: '空袭警报音响，语音同时播出',
			c4: '解除警报音响,语音同时播出',
			c5: '灾情警报音响,语音同时播出'
		},
		{
			c1: '电视台',
			c2: '空袭预报图像，语音同时播出',
			c3: '空袭警报图像， 语音同时播出',
			c4: '解除警报图像,语音同时播出',
			c5: '空袭警报图像,语音同时播出'
		},
		{
			c1: '汽笛',
			c2: '一长一短',
			c3: '连续短音',
			c4: '一长音3分钟',
			c5: '两短两长'
		},
		{
			c1: '就便器材',
			c2: '慢响',
			c3: '快响',
			c4: '间断响',
			c5: '一长响'
		},
		{
			c1: '备注',
			c2: '',
			c3: '',
			c4: '',
			c5: ''
		}
	]);

	const spanMethod = ({
		row,
		column,
		rowIndex,
		columnIndex
	}) => {
		if (columnIndex === 1) {
			if (column.property === "c2") {
				if (rowIndex !== 0) {
					return {
						display: "none",
					};
				} else {
					let rowspan = 0;
					tableData.value.forEach((item) => {
						if (row.c2 === item.c2) rowspan++;
					});
					return [rowspan, 1];
				}
			} else {
				return {
					rowspan: 1,
					colspan: 1,
				};
			}
		}
	};
	const handerMethodSd = ({
		row,
		column,
		rowIndex,
		columnIndex,
		name
	}) => {
		nextTick(() => {
			const dom = document.querySelector(`.${column.id}`);
			if (columnIndex === 1 && column.label === name) {
				dom.setAttribute("colspan", 2);
				dom.innerHTML = column.label;
			}
			if (columnIndex === 2 && !column.label) {
				dom.setAttribute("colspan", 0);
				dom.style.display = "none";
			}
		});
		return {};
	};

	// 表头单元格样式
	const headerCellStyle = () => {
		return {
			backgroundColor: "#f5f7fa",
			color: "rgba(0,0,0,0.85)",
			fontSize: "14px",
			height: "54px",
		};
	};
	// 单元格样式
	const cellStyle = () => {
		return {
			color: "rgba(0,0,0,0.65)",
			fontSize: "14px",
			lineHeight: "22px",
		};
	};
</script>
<template>
	<div class="">
		<FirstTitle name="信号使用规定和要求" class="top-15" />
		<div class="top-15">人民防空警报文字信号分预先警报、空袭警报、解除警报。</div>



		<el-table :data="tableData" class="top-15" style="width: 100%" border :header-cell-style="headerCellStyle"
			:cell-style="cellStyle">
			<el-table-column prop="c1" label="手段分类" align="center" />
			<el-table-column prop="c2" label="空袭预报" align="center" />
			<el-table-column prop="c3" label="空袭警报" align="center" />
			<el-table-column prop="c4" label="解除警报" align="center" />
			<el-table-column prop="c5" label="灾情警报" align="center" />
		</el-table>

		<FirstTitle name="号使用规定和要求" class="top-15" />
		<div class="top-15">按照人防记号要求使用。</div>

		<FirstTitle name="文件使用规定和要求" class="top-15" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
				:mode="mode" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
				:mode="mode" @onCreated="handleCreated" />
		</div>

		<FirstTitle name="资料使用规定和要求" class="top-15" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef1" :defaultConfig="toolbarConfig1"
				:mode="mode1" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml1" :defaultConfig="editorConfig"
				:mode="mode1" @onCreated="handleCreated1" />
		</div>



		<div class="flex-justify-end top-20">
			<el-button type="primary" class="save-btn" @click="saveProgramme">保存</el-button>
		</div>
	</div>
</template>
<style scoped lang="scss"></style>